import { Drawer, Spin, message } from 'antd';
import { RuleManageAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { DetailDrawerInfo } from './DetailDrawerInfo';
import { detailRuleServices } from '../services/UpdateService';
import { useState, useEffect } from 'react';

export const DetailDrawer: React.FC<RuleManageAPI.IDetailDrawer> = ({ onClose, isShowDetail, recordObj, curRes, reloadManage }) => {
  /**
   * 详情对象
   * */
  const [resObj, setResObj] = useState<Record<string, any>>({});

  /**
   * 详情接口回调
   * */
  const detailRuleCallback = (res: Record<string, any>) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      setResObj(res?.obj);
    }
  };

  /**
   * 详情接口services
   * */
  const { detailRuleRun, detailRuleLoading } = detailRuleServices(detailRuleCallback);

  useEffect(() => {
    if (recordObj?.id) {
      detailRuleRun({ id: recordObj?.id });
    }
  }, [recordObj]);

  return (
    <Drawer
      className={pageStyles['detailDrawerDes']}
      title="采购规则详情"
      style={{ position: 'absolute', height: '100%', overflow: 'hidden' }}
      placement="right"
      onClose={onClose}
      open={isShowDetail}
      getContainer={false}
      width={document.body?.clientWidth * 0.45}
      headerStyle={{ padding: '16px' }}
      bodyStyle={{ padding: 0 }}
      closable={false}
      destroyOnClose={true}
    >
      <Spin spinning={detailRuleLoading}>
        <ScrollBarLayout style={{ padding: '5px 10px' }}>
          <DetailDrawerInfo detailInfo={resObj} curRes={curRes} />
        </ScrollBarLayout>
      </Spin>
    </Drawer>
  );
};
